<template>
  <h1>{{ msg }}</h1>
  <button @click="increment">count is: {{ count }}</button>
  <p>
    Edit <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <div>拖拽-js原生</div>
  <div class="test_wrapper">
    <transition-group class="transition-wrapper" name="sort" tag="div">
      <div
        v-for="item in dataList"
        :key="item.id"
        :class="['sort-item', startId === item.id ? 'drag-active' : '']"
        :draggable="true"
        @dragstart="dragstart(item, $event)"
        @dragenter="dragenter(item, $event)"
        @dragend="dragend(item, $event)"
      >
        {{ item.label }}
      </div>
    </transition-group>
    <transition-group class="transition-wrapper" name="sort" tag="div">
      <div
        v-for="item in dataList01"
        :key="item.id"
        :class="['sort-item', startId === item.id ? 'drag-active' : '']"
        :draggable="true"
        @dragstart="dragstart(item, $event)"
        @dragenter="dragenter(item, $event)"
        @dragend="dragend(item, $event)"
      >
        {{ item.label }}
      </div>
    </transition-group>
  </div>
  <div class="sortable">SortableJS</div>
  <div class="sortable-wraper">
    <div class="sortable-box1">
      <div class="item">item 1</div>
      <div class="item">item 2</div>
      <div class="item">item 3</div>
    </div>
    <div class="sortable-box2">
      <div class="item">item 1</div>
      <div class="item">item 2</div>
      <div class="item">item 3</div>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
 
  data() {
    return {
      count: 0,
      oldData: null,
      newData: null,
      // 列表数据
      dataList: [
        { id: 1, label: "测试一号" },
        { id: 2, label: "测试二号" },
        { id: 3, label: "测试三号" },
        { id: 4, label: "测试四号" },
      ],
      dataList01: [
        { id: 7, label: "测试一号" },
        { id: 8, label: "测试二号" },
        { id: 9, label: "测试三号" },
        { id: 10, label: "测试四号" },
      ],
      startId: null,
    };
  },
  mounted() {
    var el1 = document.querySelector(".sortable-box1");
    new Sortable(el1, {
      animation: 150,
      group: "shared",
      draggable: ".item", // 允许拖拽的项目类名
      ghostClass: "sortable-ghost", // drop placeholder的css类名
      chosenClass: "sortable-chosen", // 被选中项的css 类名
      dragClass: "sortable-drag",// 正在被拖拽中的css类名
    });
    var el2 = document.querySelector(".sortable-box2");
    new Sortable(el2, {
      
      animation: 150,
      group: "shared",
    });
  
  },
  methods: {
    increment(){
      this.count++
    },
    dragstart(value, e) {
      this.oldData = value;
      console.log("拖拽开始", value, e);
      this.startId = value.id;
    },

    // 记录移动过程中信息
    dragenter(value, e) {
      this.newData = value;
      e.preventDefault();
      if (this.oldData !== this.newData) {
        let oldIndex = this.dataList.indexOf(this.oldData);
        //判断拖拽的是哪边的 -1:右边
        if (oldIndex === -1) {
          oldIndex = this.dataList01.indexOf(this.oldData);
          let newIndex = this.dataList01.indexOf(this.newData);
          //判断拖拽到哪一边 -1:左边
          if (newIndex === -1) {
            newIndex = this.dataList.indexOf(this.newData);
            let newItems = [...this.dataList];
            let oldItems = [...this.dataList01];
            oldItems.splice(oldIndex, 1);
            // 在列表中目标位置增加新的节点
            newItems.splice(newIndex, 0, this.oldData);
            this.dataList01 = [...oldItems];
            this.dataList = [...newItems];
          } else {
            let newItems = [...this.dataList01];
            newItems.splice(oldIndex, 1);
            // 在列表中目标位置增加新的节点
            newItems.splice(newIndex, 0, this.oldData);
            this.dataList01 = [...newItems];
          }
        } else {
          let newIndex = this.dataList.indexOf(this.newData);
          if (newIndex === -1) return;
          let newItems = [...this.dataList];
          // 删除老的节点
          newItems.splice(oldIndex, 1);
          // 在列表中目标位置增加新的节点
          newItems.splice(newIndex, 0, this.oldData);
          this.dataList = [...newItems];
        }
      }
    },

    // 拖拽最终操作
    dragend(value, e) {
      this.startId = null;
      console.log("拖拽结束");
    },

    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    // dragover(value,e) {
    //     // e.preventDefault()
    //     // console.log("dragover",value)

    // },
    // dragleave(value,e){
    //   console.log("dragleave",value)
    // }
  },
};
</script>
<style scoped>
.test_wrapper {
  width: 80%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.transition-wrapper {
  width: 400px;
  margin: 0 auto;
}
.sort-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
}
.sort-item:hover {
  background: rgba(175, 174, 174, 0.1);
}
.sort-move {
  transition: transform 0.5s;
}
.drag-active {
  border: 1px solid;
}
.sortable-wraper {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0 auto;
}
.item {
  padding: 10px 150px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.sortable {
  margin-bottom: 20px;
}
.sortable-ghost{
  background: red;
}
.sortable-chosen{
  border: 1px solid green;
}
.sortable-drag{
  border: 1px solid yellow;
}
</style>
